<template>
	<view>
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="order_top_tip" :style="{top:statusHeight+'px'}">
			取送路线示意，非导航规划，请遵守交规
		</view>
		<view class="content_map_box">
			<map id="map" class="map" :latitude="latitude" :longitude="longitude" :markers="covers"
				:enable-building="true" :enable-traffic="true" :show-location="true" :polyline="polyline" :scale="scale" enable-3D="true"></map>
		</view>
		
		<bab-Touchbox :minHeight="0.4" :maxHeight="0.7" :touchHeight="64" @currentHeight="setScrollHeight"
			@maxtHeight="setScrollViewHeight">
			<view class="flexRow">
				<view class="map_top_icon_box">
					<image src="https://www.cccshansong.com/chong_weapp/map_top_icon.png" mode="aspectFill"></image>
				</view>
			</view>
			<scroll-view :style="{'height':scrollViewHeight - 64 +'px'}" scroll-y="true">
				<view class="order_content_box">
					<view class="scroll_item_order_top_box">
						<view class="scroll_item_order_top_time">
							<image src="https://www.cccshansong.com/chong_weapp/time_icon.png" mode=""></image>7月05日 17:00
						</view>
						<view class="scroll_item_order_top_price">
							<view class="scroll_item_order_top_price_tip">含天气奖励¥1.5</view>
							<view class="scroll_item_order_top_price_num">
								<text>¥</text>9.9
							</view>	
						</view>
					</view>	
					<view class="scroll_item_order_center_box">
						<view class="qu_address_item_box">
							<view class="qu_address_item_left_box">
								<view class="qu_address_icon_box">
									<image src="https://www.cccshansong.com/chong_weapp/qu_icon.png" mode="" style="margin-top: 10rpx;"></image>
								</view>
								<view class="qu_address_box">
									<view class="qu_address_title">俏淮娘方便面炒鸡</view>
									<view class="qu_address_desc">沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场档位B-02号</view>	
								</view>
							</view>
							<view class="dh_icon_box">
								<image src="https://www.cccshansong.com/chong_weapp/dh_icon.png" mode=""></image>
							</view>
						</view>
						<view class="qu_address_item_box" style="margin-top: 36rpx;">
							<view class="qu_address_item_left_box">
								<view class="qu_address_icon_box">
									<image src="https://www.cccshansong.com/chong_weapp/song_icon.png" mode="" style="margin-top: 10rpx;"></image>
								</view>
								<view class="qu_address_box">
									<view class="qu_address_title">俏淮娘方便面炒鸡</view>
									<view class="qu_address_desc">沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场档位B-02号</view>	
								</view>
							</view>
							<view class="dh_icon_box">
								<image src="https://www.cccshansong.com/chong_weapp/dh_icon.png" mode=""></image>
							</view>
						</view>
						<view class="scroll_item_order_status_box">
							<view class="scroll_item_order_status_phone">
								林(先生):138****<text>9918</text> <image src="https://www.cccshansong.com/chong_weapp/phone_icon.png" mode=""></image>
							</view>
							<view class="scroll_item_order_status">外卖配送</view>
						</view>
						<view class="scroll_item_order_remark_box">
							<text>备注：</text>货物易碎，请小心配送，谢谢！
						</view>
					</view>
					
				</view>
				<view class="order_content_box_heng"></view> 
				<view class="order_content_box">
					<view class="order_content_title">
						<view class="order_content_title_xian"></view>
						<view class="order_content_title_text">商品信息</view>	
					</view>
					<view class="order_content_info_item_box">
						<view class="order_content_info_item_box_left">随心搭六件套</view>
						<view class="order_content_info_item_box_right">¥25.9</view>
					</view>
					<view class="order_content_info_item_box">
						<view class="order_content_info_item_box_left">实付</view>
						<view class="order_content_info_item_box_right">¥25.9</view>
					</view>
				</view>	
				<view class="order_content_box_heng"></view>
				<view class="order_content_box">
					<view class="order_content_title">
						<view class="order_content_title_xian"></view>
						<view class="order_content_title_text">订单信息</view>	
					</view>
					<view class="order_content_info_item_box">
						<view class="order_content_info_item_box_left">订单类型</view>
						<view class="order_content_info_item_box_right">订单包，共1单</view>
					</view>
					<view class="order_content_info_item_box">
						<view class="order_content_info_item_box_left">订单号码</view>
						<view class="order_content_info_item_box_right">2071 1460 7044 2055 880<view class="order_content_info_item_box_right_copy">复制</view></view>
					</view>
					<view class="order_content_info_item_box">
						<view class="order_content_info_item_box_left">期望送达</view>
						<view class="order_content_info_item_box_right">2024-07-05 12:00:00</view>
					</view>
				</view>	
				<view class="order_content_box_heng"></view>
				<view class="order_content_box">
					<view class="order_content_title_box">
						<view class="order_content_title">
							<view class="order_content_title_xian"></view>
							<view class="order_content_title_text">订单信息</view>	
						</view>
						<view class="order_content_title_rule">
							<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon3.png" mode=""></image>结算细则
						</view>
					</view>
					<view class="order_content_title_tip">未包含参与活动的奖励</view>
					<view class="order_content_info_item_box">
						<view class="order_content_info_item_box_left">配送费</view>
						<view class="order_content_info_item_box_right">¥9.9</view>
					</view>	
					<view class="order_content_info_item_box">
						<view class="order_content_info_item_box_left">合计</view>
						<view class="order_content_info_item_box_right"><text>¥9.9</text></view> 
					</view>	
				</view>
				<view class="order_content_box_heng"></view>
				<view class="order_content_box">
					<view class="order_content_title_box">
						<view class="order_content_title">
							<view class="order_content_title_xian"></view>
							<view class="order_content_title_text">要求送达 </view>	
						</view>
						<view class="order_content_title_rule1">
							12:00前
						</view>
					</view>
					<view class="order_content_time_box">
						<view class="order_content_time_item_box">
							<view class="order_content_time_item_time">11:00</view>
							<view class="order_content_time_item_name">下单</view>
						</view>
						<view class="order_content_time_item_box">
							<view class="order_content_time_item_time">11:00</view>
							<view class="order_content_time_item_name">接单</view>
						</view>
						<view class="order_content_time_item_box">
							<view class="order_content_time_item_time">11:00</view>
							<view class="order_content_time_item_name">派单</view>
						</view>
						<view class="order_content_time_item_box">
							<view class="order_content_time_item_time">11:00</view>
							<view class="order_content_time_item_name">送达</view>
						</view>
					</view>
				</view>
				
				<view  style="height:700rpx;"></view>
			</scroll-view>
		</bab-Touchbox>
	<!-- 	<view class="fix_detail_box">
			<view class="scroll_item_order_btn1" hover-class="hover_class">拒绝接单</view>
			<view class="scroll_item_order_btn2" hover-class="hover_class" @click.stop="handleGrab()">抢 单</view>	
		</view> -->
		<!-- <view class="fix_detail_box">
			<view class="scroll_item_order_btn3" hover-class="hover_class">
				<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon1.png" mode=""></image><text>联系</text>
			</view>
			<view class="scroll_item_order_btn3" hover-class="hover_class">
				<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon2.png" mode=""></image><text>转单</text>
			</view>
			<view class="scroll_item_order_btn4" hover-class="hover_class">我已取货</view>	
		</view> -->
		<view class="fix_kf_box" @click="handleShowKf()">
			<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon4.png" mode=""></image><text>客服</text>
		</view>
		<view class="fix_detail_box">
			<view class="scroll_item_order_btn3" hover-class="hover_class">
				<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon1.png" mode=""></image><text>联系</text>
			</view>
			<view class="scroll_item_order_btn5" hover-class="hover_class" @click.stop="handleGrab()">我已送达</view>	
		</view>
		<wyb-popup ref="kfPopup" type="center" height="364" width='640' radius="16" :zIndex='999999'  :showCloseIcon="false" >
			<view class="kfPopup_content">
				<view class="kf_btn_title">提示</view>
				<view class="kf_btn_title1">请任意选择一种方式联系客服</view>
				<view class="kf_btn_box">
					<view class="kf_btn1" @click="handleKfCall()">电话客服</view>
					<view class="kf_btn2">微信客服
						<button class="leftBox" type="default" plain="true" open-type="contact" @contact="handleKfWx()">
						    打开客服会话
						</button>
					</view>
				</view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	export default {
		components: {
			wybPopup,
			navigationCustom,
		},
		data() {
			return {
				covers: [], //存放标记点数组
				location_address: '',
				distance: '',
				cost: '',
				polyline: [],
				scale: 14,
				latitude: 30.659462,
				longitude: 104.065735,
				currentHeight: 0, // 滑动组件当前高度
				scrollViewHeight: 0, //用于计算滚动区域高度
				map: null,
				// 屏幕高度
				screenHeight: 667,
				latitude: 39.909,
				longitude: 116.39742,
				statusHeight: 0,
				config: {
					title: "", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#303133", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back3.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		computed: {
			windowHeight() {
				var systemInfo = uni.getSystemInfoSync();
				return systemInfo.windowHeight;
			},
			windowWidth() {
				return uni.getSystemInfoSync().windowWidth;
			}
		},
		onLoad() {
			var a = this
			const res = wx.getMenuButtonBoundingClientRect()
			const statusHeight = res.top //胶囊距离顶部
			const navHeight = res.height //胶囊高度
			a.statusHeight = statusHeight + 5
			a.getLocation()
		},
		methods: { 
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleKfWx(){
				var a = this
				a.$refs.kfPopup.hide();
			},
			handleKfCall(){
				var a = this
				a.$refs.kfPopup.hide();
				uni.makePhoneCall({
					phoneNumber: '17865953562',
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}    
				});
			},
			handleShowKf(){  
				var a = this
				a.$refs.kfPopup.show();
			},
			setScrollHeight(val) { // 实时返回的滑动组件高度
				this.currentHeight = val
			},
			setScrollViewHeight(val) { //最大高度
				this.scrollViewHeight = val
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						// that.latitude = res.latitude;
						// that.longitude = res.longitude;
						that.latitude =  35.106909;
						that.longitude = 118.355317;
						that.covers = []
						that.setCovers()
						that.getRide()
					},
			
				})
			},
			setCovers(latitude, longitude) {
				let that = this;
			
				var iconPath = 'https://www.cccshansong.com/chong_weapp/map_qu_icon1.png'
				var iconPath1 = 'https://www.cccshansong.com/chong_weapp/map_song_icon1.png'
				var temp_marker = {
					iconPath: iconPath,
					id: 0,
					name: '万达广场',
					latitude: 35.106909,
					longitude: 118.355317,
					width: 26,
					height: 43,
					label: null,
					callout: {
						content: '东方家园',
						color: '#000000',
						fontSize: 9,
						borderRadius: 30,
						bgColor: '#ffffff',
						padding: 5
					}
			
				}
				var temp_marker1 = {
					iconPath: iconPath1,
					id: 1,
					name: '东方购物',
					latitude: 35.114109,
					longitude: 118.343367,
					width: 26,
					height: 43,
					label: null,
					callout: {
						content: '东方购物',
						color: '#000000',
						fontSize: 9,
						borderRadius: 30,
						bgColor: '#ffffff',
						padding: 5
					}
			
				}
				that.covers.push(temp_marker)
				that.covers.push(temp_marker1)
			},
			getRide() {
				var that = this
				that.myAmapFun.getRidingRoute({
					origin: '118.343367,35.114109', // start
					destination: '118.355317,35.106909', // end
					success: function(data) {
						// 路线规划
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].rides) {
							var steps = data.paths[0].rides;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						// 直线
						var points1 = [
							{
								latitude:35.114109,
								longitude: 118.343367,
							},
							{
								latitude: 35.106909,
								longitude: 118.355317,
							}
						];
						that.polyline = [{
							points: points,
							color: "#03D6D6",
							dottedLine: false,
							arrowLine: true,
							width: 6
						}]
						
						console.log('---', that.polyline)
					},
					fail: function(info) {
			
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f6f8;
}
.top_nav_box {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;	
}
.content_map_box{
	width: 750rpx;
	height: 1100rpx;
	.map {
		width: 750rpx;
		height: 100%;
	}
	// background-color: blueviolet;
}
.header-avatar {
		width: 100rpx;
		height: 100rpx;
		background-color: #ff9900;
		border-radius: 200rpx;
		display: fixed;
		align-items: center;
		justify-content: center;
	}
.flexRow {
		display: flex;
		flex-direction: row;
		justify-content: center;
		.map_top_icon_box{
			width: 48rpx;
			height:80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 48rpx;
				height: 12rpx;
			}
		}
	}
.fix_kf_box{
	position: fixed;
	z-index: 999997;
	right: 24rpx;
	bottom: 300rpx;
	width: 88rpx;
	height: 88rpx;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1); 
	image{ 
		width: 40rpx;
		height: 40rpx;
	}
	text{
		color: rgba(36, 40, 49, 1);
		font-size: 20rpx;
	}
}
.order_content_box_heng{
	background-color: rgba(235, 238, 245, 1);
	width: 750rpx;
	height: 2rpx;
	margin: 24rpx 0;
}
.order_content_box{
	width: 686rpx;
	margin: 0 auto;
	.order_content_time_box{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		.order_content_time_item_box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 42rpx;
			.order_content_time_item_time{
				color: rgba(36, 40, 49, 1);
				font-size: 32rpx;
				font-weight: 600;
			}
			.order_content_time_item_name{
				color: rgba(36, 40, 49, 1);
				font-size: 28rpx;
				font-weight: 600;
			}
		}
	}
	.order_content_title_tip{
		color: rgba(144, 147, 153, 1);
		font-size: 28rpx;
		margin-left:20rpx;
		padding-bottom: 24rpx;
	}
	
	.order_content_title_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.order_content_title_rule1{
			color: rgba(36, 40, 49, 1);
			font-size: 32rpx;
			font-weight: 600;
		}
		.order_content_title_rule{
			display: flex;
			align-items: center;
			color: rgba(36, 40, 49, 1);
			font-size: 28rpx;
			image{
				margin-right: 10rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
		.order_content_title{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.order_content_title_xian{
				width: 2rpx;
				height: 36rpx;
				background-color: rgba(255, 107, 0, 1);
			}
			.order_content_title_text{
				font-weight: 600;
				color: rgba(36, 40, 49, 1);
				font-size: 36rpx;
				margin-left:14rpx ;
			}
		}
		
	}
	.order_content_title{
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.order_content_title_xian{
			width: 2rpx;
			height: 36rpx;
			background-color: rgba(255, 107, 0, 1);
		}
		.order_content_title_text{
			font-weight: 600;
			color: rgba(36, 40, 49, 1);
			font-size: 36rpx;
			margin-left:14rpx ;
		}
	}
	.order_content_info_item_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20rpx;
		.order_content_info_item_box_left{
			color: rgba(36, 40, 49, 1);
			font-size: 28rpx;
			margin-left: 20rpx;
		}
		.order_content_info_item_box_right{
			color: rgba(36, 40, 49, 1);
			font-size: 28rpx;
			display: flex;
			align-items: center;
			text{
				color: rgba(255, 107, 0, 1);
				font-weight: 600;
				font-size: 36rpx;
			}
			.order_content_info_item_box_right_copy{
				margin-left: 16rpx;
				width: 72rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				color: rgba(36, 40, 49, 1);
				font-size: 24rpx;
				border-radius: 4rpx;
				border: 2rpx solid rgba(144, 147, 153, 1);
			}
		}
	}
	.scroll_item_order_remark_box{
		width: 624rpx;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		padding-left: 16rpx;
		padding-right: 16rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		background-color: rgba(245, 246, 248, 1);
		font-size: 26rpx;
		color: rgba(96, 98, 102, 1);
		border-radius: 12rpx; 
		text{
			color: rgba(48, 49, 51, 1);
		}
	}
	.scroll_item_order_status_box{
		display: flex;
		align-items: center;
		margin-left: 62rpx;
		margin-top: 20rpx;
		.scroll_item_order_status{
			height: 48rpx;
			line-height: 48rpx;
			padding: 0 16rpx;
			border-radius: 6rpx;
			background-color: rgba(255, 107, 0, 1);
			color: #fff;
			font-size: 24rpx;
			margin-left: 20rpx;
		}
		.scroll_item_order_status1{
			background-color: rgba(3, 214, 214, 1);
		}
		.scroll_item_order_status2{
			background-color: rgba(0, 124, 239, 1);
		}
		.scroll_item_order_status3{
			background-color: rgba(44, 190, 118, 1);
		}
		.scroll_item_order_status_phone{
			height: 48rpx;
			line-height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 16rpx;
			color: rgba(36, 40, 49, 1);
			font-size: 28rpx;
			border: 2rpx solid rgba(228, 231, 237, 1);
			border-radius: 6rpx;
			text{
				color: rgba(255, 107, 0, 1);
			}
			image{
				width: 32rpx;
				height: 32rpx;
				margin-left: 14rpx;
			}
		}
	}
	.scroll_item_order_center_box{
		margin-top: 10rpx;
		.qu_address_item_box{
			display: flex; 
			justify-content: space-between;
			.dh_icon_box{
				width: 56rpx;
				height: 56rpx;
				// margin-right: 20rpx; 
				margin-top: 10rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.qu_address_item_left_box{
				display: flex; 
				.qu_address_icon_box{
					// margin-left: 20rpx;
					width: 46rpx;
					height: 36rpx;
					image{
						width: 46rpx;
						height: 36rpx;
					}
				}
				.qu_address_box{
					margin-left: 20rpx;
					.qu_address_title{
						color: rgba(36, 40, 49, 1);
						font-size: 36rpx;
						font-weight: 600;
						width: 454rpx;
						 text-overflow: -o-ellipsis-lastline;
						  overflow: hidden;
						  text-overflow: ellipsis;
						  display: -webkit-box;
						  -webkit-line-clamp: 4;
						  line-clamp: 4;
						  -webkit-box-orient: vertical;
					}
					.qu_address_desc{
						color: rgba(96, 98, 102, 1);
						font-size: 26rpx;
						width: 454rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;	
						margin-top: 6rpx;
					}
				}
			}
		}
		
		
	}
	
	.scroll_item_order_top_box{
		display: flex;
		align-items: center;
		justify-content: space-between; 
		.scroll_item_order_top_price{
			display: flex;
			align-items: center;
			// padding-right: 20rpx;
			.scroll_item_order_top_price_tip{
				color: rgba(144, 147, 153, 1);
				font-size: 26rpx;
				margin-right: 10rpx;
			}
			.scroll_item_order_top_price_num{
				color: rgba(255, 107, 0, 1);
				font-size: 44rpx;
				font-weight: 600;
				text{
					font-weight: 400;
					font-size: 28rpx;
					margin-right: 6rpx;
				}
			}
		}
		.scroll_item_order_top_time{
			display: flex;
			align-items: center;
			color: rgba(255, 107, 0, 1);
			font-size: 26rpx;
			// margin-left: 20rpx;
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}
	}
}
.kfPopup_content{
	width: 640rpx;
	height: 364rpx;
	background-image: url('https://www.cccshansong.com/chong_weapp/order_detail_icon5.png');
	background-size: 100% 100%;
	.kf_btn_title{
		text-align: center;
		font-size: 44rpx;
		padding: 36rpx 0;
		font-weight: 600;
	}
	.kf_btn_title1{
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
	}
	.kf_btn_box{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 66rpx;
		.kf_btn1{
			width: 280rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: rgba(255, 107, 0, 1);
			font-size: 30rpx;
			border-radius: 16rpx;
			border: 2rpx solid rgba(255, 107, 0, 1);
		}
		.kf_btn2{
			width: 280rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 30rpx;
			border-radius: 16rpx;
			border: 2rpx solid rgba(255, 107, 0, 1);
			background-color: rgba(255, 107, 0, 1);
			position: relative;
			margin-left: 30rpx;
			.leftBox{
				position: absolute;
				top: 0;
				left: 0;
				width: 280rpx;
				height: 80rpx;
				opacity: 0;
			}
		}
	}
}
.order_top_tip{
	position: absolute;
	left:88rpx;
	top: 0;
	z-index: 999;
	width: 458rpx;
	height: 40rpx;
	background-color: rgba(246, 233, 226, 1);
	border: 2rpx solid rgba(255, 107, 0, 0.1);
	border-radius: 10rpx;
	text-align: center;
	line-height: 40rpx;
	color: rgba(36, 40, 49, 1);
	font-size: 24rpx;
}
.fix_detail_box{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999997;
	width: 750rpx;
	padding-top: 16rpx;
	box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(0,0,0,0.0800);
	padding-bottom: calc(16rpx +  constant(safe-area-inset-bottom));
	padding-bottom: calc(16rpx +  env(safe-area-inset-bottom));
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	.scroll_item_order_btn1{
		width: 228rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		background-color: rgba(255, 168, 0, 1);
		border-radius: 12rpx;
		font-size: 32rpx;
		margin-right: 20rpx;
	}
	.scroll_item_order_btn2{
		width:454rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		background-color: rgba(255, 107, 0, 1);
		border-radius: 12rpx;
		font-size: 32rpx;
	}
	.scroll_item_order_btn3{
		// height: 88rpx;
		// line-height: 88rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 16rpx;
		margin-right: 20rpx;
		text{
			color: rgba(36, 40, 49, 1);
			font-size: 24rpx;
		}
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.scroll_item_order_btn4{
		width: 464rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		background-color:rgba(0, 117, 255, 1);
		border-radius: 12rpx;
		font-size: 32rpx;
		margin-left: 36rpx;
	}
	.scroll_item_order_btn5{
		width:574rpx;
		height: 88rpx; 
		line-height: 88rpx; 
		text-align: center;
		color: #fff;
		background-color:rgba(44, 190, 118, 1);
		border-radius: 12rpx;
		font-size: 32rpx;
		margin-left: 30rpx;
	}
}	
</style>
